<template>
  <div id="userList">
    <div class="box_top">
      <div class="slash_title">用户管理</div>
    </div>
    <!-- 展示 -->
    <div class="userList_centent">
      <el-input
        placeholder="免费次数："
        type="number"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button @click="SureFun" style="margin-left: 20px" type="primary"
        >确定</el-button
      >
      <!-- table列表 -->
      <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img
                :src="scope.row.pic"
                alt=""
                style="width: 150px; height: 150px"
              />
              <img
                slot="reference"
                :src="scope.row.pic"
                style="width: 70px; height: 70px; border-radius: 5px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.type == 1" style="color: #409eff">月卡</div>
            <div v-if="scope.row.type == 2" style="color: #409eff">季卡</div>
            <div v-if="scope.row.type == 3" style="color: #409eff">年卡</div>
            <div v-if="scope.row.type == 4" style="color: #409eff">非会员</div>
            <div></div>
            <div></div>
            <div></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.type != 4" type="primary"
              >非会员</el-button
            >
            <el-button v-if="scope.row.type == 4" type="info">非会员</el-button>
            <el-button v-if="scope.row.type == 1" type="info">月卡</el-button>
            <el-button v-if="scope.row.type != 1" type="primary"
              >月卡</el-button
            >
            <el-button v-if="scope.row.type == 2" type="info">季卡</el-button>
            <el-button v-if="scope.row.type != 2" type="primary"
              >季卡</el-button
            >
            <el-button v-if="scope.row.type == 3" type="info">年卡</el-button>
            <el-button v-if="scope.row.type != 3" type="primary"
              >年卡</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="pageFun"
        :current-page="page"
        :page-size="pagesize"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          pic: "https://php.zgsj1.com/hzt_file/bpdt/bp_up/202305241431371127.jpg",
          nickname: "唐僧爱吃鱼",
          type: "1",
        },
        {
          pic: "https://php.zgsj1.com/hzt_file/bpdt/bp_up/202305171715195624.jpg",
          nickname: "LiHua",
          type: "2",
        },
      ],
      input: "",
      total: 0,
      page: 1,
      pagesize: 10,
    };
  },
  mounted() {
    this.searchFun();
    this.showContent()
  },
  methods: {
    showContent() {
      this.$https(this.$api.api.count_show, {}, "GET").then((res) => {
        console.log("次数展示",res);
         if(res.data.code == 1) {
          this.input = res.data.data.count
        }
      });
    },
    SureFun(){
      this.$https(this.$api.api.count_edit,{count:this.input},'GET').then(res=>{
        console.log("设置免费次数",res);
        if(res.data.code == 1) {
          this.$message.success("修改成功!")
          this.showContent()
        }
      })
    },
    pageFun(val) {
      console.log(val);
      this.page = val;
      this.searchFun();
    },
    searchFun() {
      // let obj = {
      //   pagesize: this.pagesize,
      //   page: this.page,
      //   nickname: "",
      //   name1: "",
      //   name2: "",
      // };
      // this.value == "昵称" ? (obj.nickname = this.input) : obj;
      // this.value == "中文名称" ? (obj.name1 = this.input) : obj;
      // this.value == "英文名称" ? (obj.name2 = this.input) : obj;
      // this.$https(this.$api.api.user_show, obj, "GET").then((res) => {
      //   console.log("用户查询", res);
      //   if (res.data.code == 1) {
      //     this.tableData = res.data.data.data;
      //     this.total = res.data.data.page.total_row;
      //   } else {
      //     this.tableData = [];
      //     this.$message.warning(res.data.msg);
      //   }
      // });
    },
  },
};
</script>

<style scoped lang="less">
/deep/.el-table::before {
  height: 0;
}
/deep/.el-table::after {
  height: 0;
}

a {
  text-decoration: none;
}

#userList {
  width: 85vw;
  height: 94vh;
  .el-input {
    width: 230px;
  }
  .userList_centent {
    margin-top: 10px;
    /deep/.el-dialog {
      .el-dialog__header {
        padding: 0px;
      }
    }
  }
}

.box_top {
  .slash_title {
    border-left: 3px solid #000;
    margin-bottom: 20px;
    padding-left: 10px;
  }
}
</style>